<template>
	<view class="page-container">
		<view class="authorize-module-block">
			
			<view class="authorize-title">获取您的昵称、头像</view>
			<view class="authorize-con">
				<view class="authorize-li">
					<view class="authorize-hd">头像</view>
					<view class="authorize-bd">
						<button class="authorize-header-btn" open-type="chooseAvatar" @chooseavatar="chooseImages">
							<image class="user-hd-img" src="https://static.member.stourweb.cn/uniapp/static/images/cms-uni-authorize-header.jpg" v-if="!litpic" mode="aspectFill"></image>
							<image class="user-hd-img" :src="litpic" v-else mode="aspectFill"></image>
							<text class="iconfont">&#xe67f;</text>
						</button>
					</view>
				</view>
				<view class="authorize-li">
					<view class="authorize-hd">昵称</view>
					<view class="authorize-bd">
						<input type="nickname" class="authorize-input" placeholder="你的昵称" v-model="nickname" @input="getNickname" @change="getNickname" />
					</view>
				</view>
			</view>
						
		</view>
		<view class="authorize-btns">
			<view class="authorize-agree-btn" @click="agree">同意</view>
			<view class="authorize-refuse-btn" @click="refuse">拒绝</view>
		</view>
		
		<helang-compress ref="helangCompress"></helang-compress>
	</view>
</template>

<script>
	import helangCompress from "@/components/helang-compress/helang-compress.vue"
	import uploadImg from "@/utils/upload_img.js"
	export default {
		components: {
			helangCompress
		},
		data() {
			return {
				nickname:'',
				litpic:'',
			}
		},
		onLoad(options){
			
		},
		methods: {
			// 选择图片
			chooseImages(e){
				if(!e.detail.avatarUrl){
					uni.showToast({
						title:'上传头像失败',
						icon:'none'
					});
					return false;
				}
				uni.showLoading({
					title: '头像上传中...'
				})
							
				this.$refs.helangCompress.compress({
				    src: e.detail.avatarUrl,
				    maxSize: 750,
				    fileType: 'jpg',
				    quality: 0.8
				}).then(async res => {
					let url = await uploadImg(res);
				    this.litpic = url;
				}).catch((err)=>{
				    // 压缩失败回调
					
				});
			},
			
			//昵称
			getNickname(e) {
				this.nickname = e.detail.value;
			},
			
			// 同意
			agree(){
				if(!this.litpic){
					uni.showToast({
						title:'请上传头像',
						icon:'none'
					});
					return false;
				}
				if(!this.nickname){
					uni.showToast({
						title:'请填写昵称',
						icon:'none'
					});
					return false;
				}
				uni.setStorageSync('nickname', this.nickname);
				uni.setStorageSync('headimg', this.litpic);
				uni.navigateTo({
					url: './phone'
				})
			},
			
			// 拒绝
			refuse(){
				uni.navigateTo({
					url: './phone'
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.page-container{
		padding: 100rpx 24rpx 0;
	}
	.authorize-module-block{
		padding: 210rpx 25rpx 186rpx;
		border-radius: 20rpx;
		background-color: $uni-bg-color;
		position: relative;
		&:before{
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: -40rpx;
			width: 100%;
			height: 250rpx;
			background: url(https://static.member.stourweb.cn/uniapp/static/images/cms-uni-authorize-bg.png) no-repeat;
			background-size: contain;
		}
		.authorize-title{
			font-size: 36rpx;
			font-weight: bold;
			padding: 28rpx 0;
		}
		.authorize-con{
			margin-top: 15rpx;
			border-top: 1px solid #eee;
			.authorize-li{
				@extend .alignItems;
				height: 90rpx;
				border-bottom: 1px solid #eee;
				.authorize-hd{
					width: 80rpx;
					height: 90rpx;
					line-height: 90rpx;
					font-size: $uni-font-size-base;
				}
				.authorize-bd{
					flex: 1;
					image{
						width: 50rpx;
						height: 50rpx;
						border-radius: 4rpx;
					}
					.authorize-header-btn{
						background-color: transparent;
						padding: 0;
						margin: 0;
						@extend .justifyspacec;
						height: 90rpx;
						.iconfont{
							color: #c2c6cf;
						}
					}
					.authorize-input{
						height: 90rpx;
						line-height: 90rpx;
						font-size: $uni-font-size-base;
					}
				}
			}
			
		}
	}
	.authorize-btns{
		margin-top: 110rpx;
		.authorize-refuse-btn,
		.authorize-agree-btn{
			width: 400rpx;
			margin: 0 auto 30rpx;
			color: $uni-text-color-primary;
			font-size: $uni-font-size-lg;
			padding: 24rpx 0;
			text-align: center;
			border-radius: 12rpx;
			background-color: #eee;
		}
		.authorize-agree-btn{
			color: #fff;
			background-color: $uni-bg-color-primary !important;
			
		}
	}
	
</style>
